<template>
  <el-config-provider :locale="appStore.locale" :size="size">
    <router-view />
  </el-config-provider>
</template>

<script setup lang="ts">
import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'
import useAppStore from '@/store/modules/app';

const appStore = useAppStore();
const size = computed(() => appStore.size as any);

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
  })
})
</script>

<style lang="scss">
$greeyColor: #8c939d;
$activedColor: #68C23D;
$inactivedColor: #F75C4E;
$blueColor: #69AFF0;
$purpleColor: #B886F8;
$orangeColor: rgb(230, 163, 63);

$publicTableLineHeight: 13;
@mixin alert{
  color: $inactivedColor;
  line-height: $publicTableLineHeight;
};
@mixin warning{
  color: $orangeColor;
  line-height: $publicTableLineHeight;
}
@mixin not-alert{
  line-height: $publicTableLineHeight;
};
@mixin normal{
  color: $activedColor;
  line-height: $publicTableLineHeight;
};
@mixin primary{
  color: $blueColor;
  line-height: $publicTableLineHeight;
}
@mixin purple{
  color: $purpleColor;
  line-height: $publicTableLineHeight;
}
.alert {
  @include alert;
}
.warning{
  @include warning;
}
.not-alert{
  @include not-alert;
}
.normal{
  @include normal;
}
.primary{
  @include primary;
}
.purple{
  @include purple;
}
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>
